<template>
    <div class="aptitudeShop">
        <pub-head isBorder="true"></pub-head>

        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <router-link :to="'/aptitude'">&nbsp;资质服务 ></router-link>
            <span class="blue-c">&nbsp;资质买卖</span>
        </div>

        <div class="aptitudeShop-box flex flexv">
            <div class="aptitudeShop-box-head flex">
                <span class="flex1">资质买卖</span>
            </div>

            <!-- 列表 -->
            <ul class="aptitudeShop-box-lists flex flexv">
                <li class="aptitudeShop-box-list flex">
                    <span class="aptitudeShop-list-name">买卖类型</span>
                    <input type="text" class="flex1 select" placeholder="请选择买卖类型" readonly @click="picktype" v-model="type">
                </li>
                <li class="aptitudeShop-box-list flex">
                    <span class="aptitudeShop-list-name">信息标题</span>
                    <input type="text" class="flex1" placeholder="请输入信息标题" v-model="title">
                </li>
                <li class="aptitudeShop-box-list flex">
                    <span class="aptitudeShop-list-name">证书地址</span>
                    <area-select v-model="selected" size="small" type="text" :data="pca" :placeholders="['选择省份','选择城市']" class="flex1 flex jus-b"></area-select>
                </li>
                <li class="aptitudeShop-box-list flex">
                    <span class="aptitudeShop-list-name">企业资质</span>
                    <input type="text" class="flex1" placeholder="请输入企业资质" v-model="quality">
                </li>
                <li class="aptitudeShop-box-list flex">
                    <span class="aptitudeShop-list-name">相关费用</span>
                    <input type="text" class="flex1" placeholder="请输入相关费用" v-model="money">
                </li>
                <li class="aptitudeShop-box-list flex details">
                    <span class="aptitudeShop-list-name">详细信息</span>
                    <textarea type="text" class="flex1" placeholder="请输入详细信息" v-model="infos"></textarea>
                </li>
            </ul>

            <!-- 提交按钮 -->
            <div class="sub-btn tc" @click="subForm">确认提交买卖信息</div>

        </div>

        <!-- 类型弹窗 -->
        <van-popup v-model="show" :overlay="true" class="area-pop flexv">
            <div class="type-pop-head">选择资质类型</div>
            <div class="type-pop-box flex">
                <ul class="flex1 flexv">
                    <li class="flex type-pop-list jus-b" v-for="(item, index) in types" :key="index" @click="thisType(index)">
                        <p>{{item.name}}</p>
                        <span class="point flexc" data-id="item.id" :class="{'on': selec == index}"><i></i></span>
                    </li>
                </ul>
            </div>
        </van-popup>

        <!-- 提交前登陆弹窗 -->
        <van-popup v-model="bfSub" :overlay="true" class="before-pop flex flexv">
            <div class="before-pop-head tc">登录建筑工程平台</div>
            <div class="before-pop-login flex flexv">
                <div class="flex before-input">
                    <input type="text" class="flex1" placeholder="请输入您的手机号" v-model="tel">
                </div>

                <div class="flex before-input">
                    <input type="text" class="before-code" placeholder="请输入验证码" v-model="code">
                    <span class="blue-c flex1 tc" v-if="unget" @click="getCode(60)">获取验证码</span>
                    <span class="blue-c flex1 tc" v-else>{{times + 'S' + ' 后重新获取'}}</span>
                </div>
            </div>
            <div class="login-btn" @click="subAll">登录</div>
        </van-popup>


        <pub-foot index="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import pubHead from '@/components/head'
import pubFoot from '@/components/foot'
import { Toast, Area, Popup, Picker } from 'vant';
import { pca } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import { AreaSelect } from 'vue-area-linkage';

Vue.use(Area).use(Popup).use(Picker).use(AreaSelect);
export default {
    data() {
        return {
            type: null, // 买卖类型
            type_id: null, // 买卖类型id
            types: [], // 买卖类型列表
            title: null, // 信息标题
            quality: null, // 企业资质
            money: null, // 相关费用
            infos: null, // 详细信息
            selected: [], // 选择的地址数据
            pca: pca, // 省市区数据
            show: false, // 是否显示买卖类型弹窗
            selec: -1, // 选中下标
            bfSub: false, // 是否显示登录弹窗
            unget: true, // 是否获取验证码
            times: '60', // 倒计时
            tel: null, // 手机号
            code: null, // 验证码
        }
    },
    components: {
        pubHead,
        pubFoot,
        'van-area': Area,
        'van-popup': Popup,
        'van-picker': Picker,
    },
    watch: {
        tel(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.tel)){
                this.tel = null
            }
        },
        code(newVal, oldVal){
            if(!(/^[0-9]*$/).test(this.code)){
                this.code = null
            }
        },
    },
    computed: {
        ...mapState(['user'])
    },
    created(){
        this.getData()
    },
    methods: {
        // 获取数据
        getData(){
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=sale', {
                params: {
                    uid: this.$store.state.user.uid,
                    cate_id: this.$route.params.id
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.types = res.data.data.buy_cate
                }
            })
        },
        // 买卖类型弹窗
        picktype(){
            this.show = true;
        },
        // 选择买卖类型
        thisType(index){
            this.selec = index;
            this.type = this.types[index].name;
            this.type_id = this.types[index].id;
            this.show = false;
        },
        // 提交前登录
        subForm(){
            if (!this.type) {
                Toast({
                    duration: 1800,
                    message: '请选择买卖类型！'
                })
                return
            }
            if (!this.title) {
                Toast({
                    duration: 1800,
                    message: '请输入信息标题！'
                })
                return
            }
            if (this.selected.length < 1) {
                Toast({
                    duration: 1800,
                    message: '请选择证书地址！'
                })
                return
            }
            if (!this.quality) {
                Toast({
                    duration: 1800,
                    message: '请输入企业资质！'
                })
                return
            }
            if (!this.money) {
                Toast({
                    duration: 1800,
                    message: '请输入相关费用！'
                })
                return
            }
            if (!this.infos) {
                Toast({
                    duration: 1800,
                    message: '请输入详细信息！'
                })
                return
            }
            this.bfSub = true;
        },
        // 获取验证码
        getCode(val){
            if (this.unget) {
                if (!this.tel) {
                    Toast({
                        duration: 1800,
                        message: '请输入手机号！'
                    })
                    return
                }
                if (!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)) {
                    Toast({
                        duration: 1800,
                        message: '请输入正确的手机号！'
                    })
                    return
                }
                this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=MsgCode&a=sendCode', {
                    params: {
                        mobile: this.tel
                    }
                }).then(res => {
                    if (res.data.code == 200) {
                        this.unget = false;
                        setInterval(() => {
                            val--;
                            this.times = val;
                            if (val <=0) {
                                this.unget = true;
                                this.times = null;
                            }
                        }, 1000)
                        Toast({
                            duration: 1800,
                            message: res.data.msg
                        })
                    } else {
                        Toast({
                            duration: 1800,
                            message: res.data.msg
                        })
                    }
                })
            }else {
                Toast({
                    duration: 1800,
                    message: '请稍后再试！'
                })
            }
            
        },
        // 提交
        subAll(){
            if (!this.tel) {
                Toast({
                    duration: 1800,
                    message: '请输入手机号！'
                })
                return
            }
            if (!(/^0?((13|14|15|16|17|18|19)[0-9])[0-9]{8}$/).test(this.tel)) {
                Toast({
                    duration: 1800,
                    message: '请输入正确的手机号！'
                })
                return
            }
            if (!this.code) {
                Toast({
                    duration: 1800,
                    message: '请输入验证码！'
                })
                return
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Handle&a=salelist',{
                params: {
                    uid: this.$store.state.user.uid,
                    buy_id: this.type_id,
                    province: this.selected[0],
                    city: this.selected[1],
                    mobile: this.tel,
                    code: this.code,
                    title: this.title,
                    quali: this.quality,
                    money: this.money,
                    info: this.infos,
                    cate_id: this.$route.params.id,
                }
            }).then(res => {
                if(res.data.code == 200){
                    this.bfSub = false;
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                    setTimeout(() =>{
                        this.$router.go(-1);
                    },2000)
                }else{
                    Toast({
                        duration: 1800,
                        message: res.data.msg
                    })
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.aptitudeShop{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 头部
    .head {
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        a,span{
            color: #999;
            font-weight: bold;
        }
    }
    // 内容
    .aptitudeShop-box{
        background-color: #fff;
        //内容头部
        .aptitudeShop-box-head {
            width: 100%;
            height: 0.8rem;
            padding: 0 0.24rem;
            border-bottom: 1px solid #d9d9d9;
            span{
                height: 0.4rem;
                margin: auto 0;
                padding-left: 0.14rem;
                border-left: 0.06rem solid #1f78ff;
                font-size: 0.3rem;
                line-height: 0.4rem;
                font-weight: bold;
                color: #1f78ff;
            }
        }
        // 内容列表
        .aptitudeShop-box-lists{
            margin-top: 0.2rem;
            padding: 0 0.24rem;
            .aptitudeShop-box-list{
                width: 100%;
                height: 0.65rem;
                margin-bottom: 0.15rem;
                font-size: 0.26rem;
                .aptitudeShop-list-name{
                    width: 1.5rem;
                    height: 0.65rem;
                    border-radius: 0.1rem;
                    text-align: center;
                    line-height: 0.65rem;
                    font-weight: bold;
                    color: #1f78ff;
                    background-color: #dcecff;
                }
                input {
                    margin-left: 0.1rem;
                    padding: 0 0.24rem;
                    line-height: 0.65rem;
                    text-align: right;
                    border-radius: 0.1rem;
                    background-color: #f5f5f5;
                }
                .select{
                    padding: 0 0.6rem 0 0.24rem;
                    background: url('~@/assets/down-ico.png') no-repeat 96% #f5f5f5;
                    background-size: 0.24rem;
                }
            }
            .details{
                height: 2rem;
                textarea{
                    height: 100%;
                    margin-left: 0.1rem;
                    padding: 0.2rem;
                    border-radius: 0.1rem;
                    background-color: #f5f5f5;
                    font-size: 0.26rem;
                    line-height: 150%;
                    color: #333;
                    resize: none;
                }
            }
        }
        // 提交按钮
        .sub-btn{
            width: 7rem;
            height: 0.8rem;
            margin: 0.3rem auto 0.84rem;
            border-radius: 0.1rem;
            font-size: 0.26rem;
            line-height: 0.8rem;
            color: #fff;
            background-color: #1f78ff;
        }
    }
    // 弹窗
    .area-pop{
        width: 4.9rem;
        height: 5rem;
        margin: auto;
        padding: 0.44rem;
        z-index: 10;
        border-radius: 0.2rem;
        background-color: #fff;
        .type-pop-head{
            height: 0.4rem;
            font-size: 0.34rem;
            line-height: 0.4rem;
            font-weight: bold;
            text-align: center;
            color: #333;
        }
        .type-pop-box{
            width: calc(100% - 0.84rem);
            position: absolute;
            z-index: 20;
            top: 0.84rem;
            bottom: 0.44rem;
            overflow: auto;
            .type-pop-list {
                width: 100%;
                height: 0.9rem;
                border-bottom: 1px solid #dbdbdb;
                font-size: 0.28rem;
                line-height: 0.9rem;
                color: #333;
                .point{
                    width: 0.34rem;
                    height: 0.34rem;
                    margin: auto 0;
                    border-radius: 100%;
                    border: 1px solid #999;
                }
                .on{
                    border-color: #1f78ff;
                    i{
                        width: 0.2rem;
                        height: 0.2rem;
                        border-radius: 100%;
                        background-color: #1f78ff;
                    }
                }
            }
            .type-pop-list:last-child{
                border-bottom: none;
            }
        }
    }
    .before-pop{
        width: 5.6rem;
        height: 4.72rem;
        margin: auto;
        padding: 0.44rem;
        border-radius: 0.2rem;
        font-size: 0.26rem;
        background-color: #fff;
        .before-pop-head{
            font-size: 0.34rem;
            font-weight: bold;
            line-height: 120%;
            color: #333;
        }
        .before-pop-login{
            margin-top: 0.6rem;
            .before-input{
                width: 4.72rem;
                height: 0.7rem;
                margin-bottom: 0.15rem;
                padding: 0 0.3rem;
                border: 1px solid #dbdbdb;
                line-height: 0.7rem;
                border-radius: 0.1rem;
            }
            .before-code{
                width: 2rem;
            }
        }
        .login-btn {
            width: 4.72rem;
            height: 0.7rem;
            margin-top: 0.1rem;
            font-size: 0.26rem;
            line-height: 0.7rem;
            text-align: center;
            color: #fff;
            border-radius: 0.1rem;
            background-color: #1f78ff;
        }
    }
}
</style>
